﻿
@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_LayoutBase.cshtml";
}

@section styles{
    <link href="@Url.Content("~/Content/css/common/bootstrap-table/bootstrap-table.min.css")" rel="stylesheet" />
    <link href="@Url.Content("~/Content/css/common/animate/animate.min.css")" rel="stylesheet" />
    <link href="@Url.Content("~/Content/css/common/iCheck/custom.css")" rel="stylesheet" />
    <link href="@Url.Content("~/Content/css/hplus/style.css")" rel="stylesheet" />
    <link href="@Url.Content("~/Content/css/hplus/font-awesome.css?v=4.4.0")" rel="stylesheet" />
    <style>
        #emailtable {
            
            table-layout: fixed;
        }
            #emailtable td {
                max-width:20px;
                max-height:10px;
                overflow:hidden;
                white-space:nowrap;
                text-overflow:ellipsis;
            }
    </style>

}
<div id="dMain">
    <div class="wrapper wrapper-content animated fadeInRight">
        <div class="ibox">
            <div class="ibox-content">
                <div class="row">
                    <div class="col-sm-3">
                        <div class="ibox float-e-margins">
                            <div class="ibox-content mailbox-content">
                                <div class="file-manager">
                                    <a class="btn btn-block btn-primary compose-mail" onclick="createmail()"><i class="iconfont icon-tianjia"></i>&nbsp;写信</a>
                                    <div class="space-25"></div>
                                    <h5>文件夹</h5>
                                    <ul class="folder-list m-b-md" style="padding: 0">
                                        @foreach (var item in ViewBag.EmailBoxTData)
                                        {
                                            <li>
                                                <a onclick="seachEamilBox(@item.BOX_ID,'@item.BOX_NAME',@item.count)">
                                                    <i class="fa fa-inbox "></i> @item.BOX_NAME
                                                    @if (item.count > 0)
                                                    {
                                                        if (item.BOX_NAME == "草稿箱")
                                                        {
                                                            <span class="label label-danger pull-right">@item.count</span>
                                                        }
                                                        else
                                                        {
                                                            <span class="label label-warning pull-right">@item.count</span>
                                                        }
                                                    }
                                                </a>
                                            </li>
                                        }
                                    </ul>
                                    <h5>分类</h5>
                                    <ul class="category-list" style="padding: 0">
                                        <li>
                                            <a href="#"> <i class="fa fa-circle text-navy"></i> 工作</a>
                                        </li>
                                        <li>
                                            <a href="#"> <i class="fa fa-circle text-danger"></i> 文档</a>
                                        </li>
                                        <li>
                                            <a href="#"> <i class="fa fa-circle text-primary"></i> 社交</a>
                                        </li>
                                        <li>
                                            <a href="#"> <i class="fa fa-circle text-info"></i> 广告</a>
                                        </li>
                                        <li>
                                            <a href="#"> <i class="fa fa-circle text-warning"></i> 客户端</a>
                                        </li>
                                    </ul>

                                    <h5 class="tag-title">标签</h5>
                                    <ul class="tag-list" style="padding: 0">
                                        <li>
                                            <a href="#"><i class="fa fa-tag"></i> 朋友</a>
                                        </li>
                                        <li>
                                            <a href="#"><i class="fa fa-tag"></i> 工作</a>
                                        </li>
                                        <li>
                                            <a href="#"><i class="fa fa-tag"></i> 家庭</a>
                                        </li>
                                        <li>
                                            <a href="#"><i class="fa fa-tag"></i> 孩子</a>
                                        </li>
                                        <li>
                                            <a href="#"><i class="fa fa-tag"></i> 假期</a>
                                        </li>
                                        <li>
                                            <a href="#"><i class="fa fa-tag"></i> 音乐</a>
                                        </li>
                                        <li>
                                            <a href="#"><i class="fa fa-tag"></i> 照片</a>
                                        </li>
                                        <li>
                                            <a href="#"><i class="fa fa-tag"></i> 电影</a>
                                        </li>
                                    </ul>
                                    <div class="clearfix"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-9 animated fadeInRight">
                        <div class="mail-box-header">

                            <div id="dSearch" class="pull-right mail-search">
                                <div class="input-group">
                                    <input type="text" name="boxClass" id="boxClass" hidden />
                                    <input type="text" class="form-control input-sm" name="Search" id="Search" placeholder="搜索邮件标题，正文等">
                                    <div class="input-group-btn">
                                        <a id="lbtnSearch" class="btn btn-sm btn-primary" onclick="emailSearch()">
                                            搜索
                                        </a>
                                    </div>
                                </div>
                            </div>
                            <h2 id="BoxClassName"></h2>
                            <div class="mail-tools tooltip-demo m-t-md">
                                <div class="btn-group pull-right">
                                    @*<button class="btn btn-white btn-sm">
                                            <i class="fa fa-arrow-left"></i>
                                        </button>
                                        <button class="btn btn-white btn-sm">
                                            <i class="fa fa-arrow-right"></i>
                                        </button>*@

                                </div>
                                <button class="btn btn-white btn-sm" data-toggle="tooltip" onclick="refresh()" data-placement="left" title="刷新邮件列表"><i class="fa fa-refresh"></i> 刷新</button>
                                @*<button class="btn btn-white btn-sm" data-toggle="tooltip" data-placement="top" title="标为已读">
                                        <i class="fa fa-eye"></i>
                                    </button>*@
                                @*<button class="btn btn-white btn-sm" data-toggle="tooltip" data-placement="top" title="标为重要">
                                        <i class="fa fa-exclamation"></i>
                                    </button>*@
                                @*<button class="btn btn-white btn-sm" data-toggle="tooltip" onclick="delemail()" data-placement="top" title="标为垃圾邮件">
                                        <i class="fa fa-trash-o"></i>
                                    </button>*@

                            </div>
                        </div>
                        <div class="mail-box">
                            <table id="emailtable" class="table table-condensed table-bordered table-hover table-striped"></table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@section scripts{
    <script src="@Url.Content("~/Content/js/common/bootstrap-table/bootstrap-table.min.js")"></script>
    <script src="@Url.Content("~/Content/js/common/bootstrap-table/locale/bootstrap-table-zh-CN.min.js")"></script>
    <script src="@Url.Content("~/Content/js/common/bootstrap-table/bootstrap-table-export.js")"></script>
    <script src="@Url.Content("~/Content/js/common/bootstrap-table/tableExport.js")"></script>
    <script src="@Url.Content("~/Content/js/common/bootstrap-table/bootstrap-table-cookie.js")"></script>
    <script src="@Url.Content("~/Content/js/common/from.js")"></script>



    <!-- iCheck -->
    <script src="@Url.Content("~/Content/js/common/icheck.min.js")"></script>
    <script>
        $(document).ready(function () {
            document.getElementById("BoxClassName").innerText = "收件箱";
            $("#boxClass").val(1);
            $('.i-checks').iCheck({
                    checkboxClass: 'icheckbox_square-green',
                    radioClass: 'iradio_square-green',
                });
            $('#emailtable').bootstrapTable({
                url: '/Personal/EMail/GetTableJsonResult',  //请求后台的URL（*）
            method: 'get',                      //请求方式（*）
            //data: $("#dJson").text() != "" ? JSON.parse($("#dJson").text()) : "",
            dataType: "json",
            columns: [
			    {checkbox: true},
			    {
                    title:"重要程度",field: 'IMPORTANT', align: 'center', formatter: function (value, row, index) {
                        if (value == "1") { return '<span>重要</span>'; } else if (value == "2") { return '<span>非常重要</span>'; } else { return '<span>一般</span>'}
                    }
                },
				{
                    title: "发件人", field: 'FROM_ID', align: 'center'
                },
				{
                    title: "邮件主题", field: 'SUBJECT', align: 'center'
                },
                {
                    title: "邮件内容", field: 'CONTENT', align: 'center', formatter: function (value, row, index) {
                        if (value) {  return filterHTMLTag(value); }         
                    }
                },
                {
                    title: "发送状态", field: 'SEND_FLAG', align: 'center', formatter: function (value, row, index) {
                        if (value == "1") { return '<span>已发送</span>'; } else if (value=="0") { return '<span>未发送</span>'; }
                    }
                },
				{
                    title: "发送时间", field: 'SEND_TIME', align: 'center', formatter: function (value, row, index) {
                        if (value) {
                            return new Date(value).Format("yyyy-MM-dd hh:mm:ss");
                        }
                    }
                },
                {
                    title: "操作",
                    align: 'center',
                    valign: 'middle',
                    formatter: function (value, row, index) {
                        var ids = row.BODY_ID;
                        return '<a class="btn btn-info btn-xs btn-outline" onclick="editbody(\'' + ids + '\')">编辑</a>  <a class=" btn btn-danger btn-xs" onclick="del(\'' + ids + '\')">删除</a>';
                    }
                }
            ],
            toolbar: '#toolbar',//工具按钮用哪个容器
            buttonsClass: "sm btn-white",//按钮class
            pageSize: 10,//分页条数
            clickToSelect: false,//设置true 将在点击行时，自动选择单选或复选框
            singleSelect: false,//为true则禁止多选
            cache: false,//是否缓存
            cookie: true,//是否启用cookie
            cookieIdTable: "Email",//cookie键值
            pagination: true,//是否分页
            showColumns: true,//是否显示所有的列
            showRefresh: true,//是否显示刷新按钮
            search: false,//是否启用搜索
            showPaginationSwitch: true,//是否显示分页切换按钮
            showExport: true,//是否启用导出
            striped: false,//是否显示行间隔色
            detailView: false,//是否显示切换视图列
            queryParams: function (params) {
                    var param = {};
                    //var arr = $("form").serialize();
                    //$.param(arr);
                    //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
                    $('#dSearch').find('[name]').each(function () {
                        var value = $(this).val();
                        if (value != '') {
                            //if (!param.find($(this).attr('name')))
                            param[$(this).attr('name')] = value;
                        }
                });
                    return param;
                },
            //detailFormatter: detailFormatter,//卡片视图内容格式化
            onDblClickRow: function (row, obj) { //双击行事件
                parent.createTab('1403', '邮件详情', 'Personal/EMail/Details?BODY_ID=' + row.BODY_ID + '');
            },
            onClickRow: function (row, obj) { //单击行事件
                $(obj).parent().find("tr").removeClass("selected");
                $(obj).addClass("selected");

                ////根据选中的行获取子表数据
                //GetSonData(row.ID);
            },
            onSearch: function (text) {
                if (text != "") {
                    $("#tabData tbody tr td:not(.bs-checkbox)").each(function (i) {
                        var str = "<span class=\"bg-yellow\">" + text + "</span>";
                        var NewText = $("#tabData tbody tr td:not(.bs-checkbox)").eq(i).text().replaceAll(text, str);
                        $("#tabData tbody tr td:not(.bs-checkbox)").eq(i).html(NewText);
                    })
                }
            }
        });
    })
        function createmail() {
                location.href = "/Personal/EMail/Edit";
        }
        function refresh() {
            $('#emailtable').bootstrapTable('refresh');
        }
        function emailSearch(text) {
            $('#emailtable').bootstrapTable('refresh');//刷新Table，Bootstrap Table 会自动执行重新查询
        }
        function seachEamilBox(boxClassId, boxClassName, boxCount) {
            var arr = boxClassName;
            if (boxCount > 0) {
                arr += "(" + boxCount + ")";
            }
            $("#boxClass").val(boxClassId);
            document.getElementById("BoxClassName").innerText = arr;
            $('#emailtable').bootstrapTable('refresh');//刷新Table，Bootstrap Table 会自动执行重新查询
        }
        function del(ids) {
            layer.confirm('是否删除此邮件？', {
                btn: ['确定', '取消'] //按钮
            }, function () {
                var boxclass = $("#boxClass").val();
                var url = "/Personal/EMail/Delete?Id=" + ids + "&boxclass=" + boxclass;
              //  var url = '@Url.Action("Delete", "EMail", new { area = "Personal" })\/' + ids;
                $.get(url, function (result) {
                    //$('#emailtable').bootstrapTable('refresh');//刷新Table，Bootstrap Table 会自动执行重新查询
                    layer.msg('删除邮件成功！', {
                        icon: 1,
                        time: 2000//2s后自动关闭
                    });
                    location.href = "/Personal/EMail/Index?boxclass=" + boxclass;
                });
            });
        }

        function editbody(ids) {
            var boxclass = $("#boxClass").val();
             location.href = "/Personal/EMail/Edit?id=" + ids + "&boxclass=" + boxclass ;
            // parent.createTab(\'6212\',\'编辑\',\'@Url.Action("Edit", "EMail",new { area = "Personal"})\')}
        }

        function delemail() {
            var boxclass = $("#boxClass").val();
            var ids;
            var selectrows = $("#emailtable").bootstrapTable('getSelections');
            for (var i = 0; i < selectrows.length; i++) {
                if (i == 0 || i == "0") {
                    ids += selectrows[i].BODY_ID;
                } else {
                    ids += "," + selectrows[i].BODY_ID;
                }
            }
            del(ids, boxclass);
        }     
    </script>
}

